<template>
  <div class="login-page">
    <div class="login-pane">
      <div class="logo-box">
        <img src="@/images/logo.png" />
      </div>
      <div class="login-box ba-center">
        <el-tabs v-model="activeName">
          <el-tab-pane label="密码登录" name="first">
            <el-form ref="formRef" :model="loginForm">
              <el-form-item prop="username" :rules="rules">
                <el-input v-model="loginForm.username" clearable placeholder="请输入用户名" :prefix-icon="User">
                </el-input>
              </el-form-item>
              <el-form-item prop="password" :rules="rules">
                <el-input v-model="loginForm.password" clearable type="password" placeholder="请输入密码" :prefix-icon="Lock">
                </el-input>
              </el-form-item>
              <el-form-item>
                <m3-button class="login-button" type="primary" @click="login(formRef)" v-loading="submitLoading">
                  登录
                </m3-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="证书登录" name="second">待开发</el-tab-pane>
          <el-tab-pane label="密码证书" name="third">待开发</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import M3Button from '../../components/button/index.vue'
const loginForm = reactive({
  username: "",
  password: "",
});
const activeName = ref("first");
const formRef = ref(null);
const submitLoading = ref(false);

const rules = {
  required: true,
  message: "不能为空",
  trigger: "blur",
};

const login = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      submitLoading.value = true;
      setTimeout(() => {
        ElMessage.success("登录成功");
        submitLoading.value = false;
      }, 2000);
    } else {
      ElMessage.warning("请输入");
      return false;
    }
  });
};
</script>

<style scoped>
.login-page {
  min-width: 1024px;
  height: 100%;
  display: flex;
  background: url("/assets/images/bg.jpg") no-repeat center;
  background-size: cover;
}

.login-page img {
  width: 100%;
}

.login-pane {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 480px;
  background: linear-gradient(180deg,
      rgba(240, 244, 253, 0.5) 100%,
      #ffffff 100%);

  box-shadow: -1px 0px 0px 0px #ffffff;
  border-radius: 4px 0px 0px 4px;
  backdrop-filter: blur(3px);
}

.logo-box img {
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  margin: 32px 32px 130px 288px;
}

.login-box {
  height: 100%;
  min-height: 400px;
  padding: 0 80px;
}

.login-box :deep(.el-tabs__content) {
  min-height: 216px;
}

.login-box :deep(.el-tabs__header) {
  margin-bottom: 16px;
}

.login-box :deep(.el-form-item) {
  margin-bottom: 24px;
}

.login-box :deep(.el-input) .el-input__wrapper {
  height: 48px;
  border-radius: 2px;
  border: 1px solid #dcdcdc;
  box-shadow: none;
  padding: 12px 16px 12px 12px;
  font-size: 16px;
}

.login-box :deep(.el-input) .el-input__wrapper .el-input__inner {
  height: 24px;
  line-height: 24px;
}

.login-button {
  width: 100%;
  height: 48px;
  border-radius: 2px;
}

.login-box :deep(.el-tabs__nav).is-top {
  width: 100%;
  justify-content: space-between;
}

.login-box :deep(.el-tabs__nav).is-top .el-tabs__item {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  padding: 0 12px;
}
</style>